<template>
    <div style="height: 435px;overflow: auto;">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="1、中压管网GIS图选择" name="1">
                <div class="demo-image__preview">
                    <el-image :src="domAddress + midNetGIS.selectedImage" alt="" style="width: 150px;height:150px;"
                        :preview-src-list="[domAddress + midNetGIS.selectedImage]"></el-image>
                </div>



                <select-alert-image-vue :surveyImage="midNetGIS.allImage" @message="getImage"></select-alert-image-vue>
            </el-collapse-item>
            <el-collapse-item title="2、实地实勘隐患图片————最多选取5条内容" name="2">
                <div style="display: flex; flex-wrap: wrap;">
                    <div style="width: 150px; text-align: center;margin-right: 20px;margin-top: 20px;"
                        v-for="(item, index) in otherDangerData" :key="index">
                        <div>
                            <el-checkbox v-model="item.isSelected" :label="item.title" border
                                @change="statusChange(item.isSelected, index)"></el-checkbox>
                        </div>
                        <div>描述:  {{ item.description }}</div>
                        <div class="demo-image__preview">
                    <el-image :src="domAddress + item.selectedImage" alt="" style="width: 150px;height:150px;"
                        :preview-src-list="[domAddress + item.selectedImage]"></el-image>
                </div>
                        <select-alert-image-vue :surveyImage="item.allImage" @message="getDangerImage"
                            :index="index"></select-alert-image-vue>
                    </div>
                </div>
            </el-collapse-item>

        </el-collapse>
    </div>
</template>
<script>
import ImageDialog from '../OtherOwerUseComponent/ImageDialog.vue';
import selectAlertImageVue from '../OtherOwerUseComponent/selectAlertImage.vue';

selectAlertImageVue
export default {
    props: ['surveyImage', 'information'],
    watch: {
        surveyImage: {
            handler(newData, oldData) {
                this.distrbuteImage(newData)
            },
        },
        information: {
            handler(newData, oldData) {
                for (let i = 0; i < this.otherDangerData.length; i++) {
                    this.otherDangerData[i].description = newData[this.otherDangerData[i].dictName]
                }
            },
        },
        ///实地勘察数据传值
        otherDangerData:{
            handler(newData,oldData){
                this.$emit('dangerArrayData',newData)
            },
            deep: true // 深度监听数组的变化
        },
        ///中压管网GIS图传值
        midNetGIS:{
            handler(newData,oldData){
                this.$emit('GISArrayData',newData)
            },
            deep: true // 深度监听数组的变化
        }
    },
    name: 'secondLevelAlert',
    data() {
        return {
            midNetGIS: {
                allImage: [],
                selectedImage: '',
            },
            otherDangerData: [
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内网中压管网/主控阀至调压设施/穿越公路',
                    dictName: 'roadCrossing',
                    title: '穿越公路',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内网中压管网/主控阀至调压设施/根系植物',
                    dictName: 'rootPlant',
                    title: '根系植物',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内网中压管网/主控阀至调压设施/沉降明显',
                    dictName: 'significantSettlement',
                    title: '沉降明显',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内网中压管网/主控阀至调压设施/管道暴露',
                    dictName: 'pipelineExposure1',
                    title: '管道暴露',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内网中压管网/主控阀至调压设施/施工工地',
                    dictName: 'constructionSite1',
                    title: '施工工地',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内网中压管网/主控阀至调压设施/车辆碾压',
                    dictName: 'vehicleRoadCompaction',
                    title: '车辆碾压',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内网中压管网/主控阀至调压设施/化粪池',
                    dictName: 'inmSepticTank',
                    title: '化粪池',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内网中压管网/主控阀至调压设施/电气交汇',
                    dictName: 'electricalIntersection',
                    title: '电气交汇',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内网中压管网/主控阀至调压设施/主控阀至调压设施',
                    dictName: 'mcvToPrf',
                    title: '主控阀至调压设施',
                    description: '',
                    isSelected: false
                },
              

            ],
            domAddress: 'http://192.168.10.233:86',
            activeNames: ['1']
        }
    },
    methods: {
        openVn() {
            const h = this.$createElement;
            this.$message({
                message: h('p', null, [
                    h('span', null, '最多选择'),
                    h('i', { style: 'color: teal' }, '5'),
                    h('span', null, '条'),
                ])
            });
        },
        statusChange(value, index) {
            const count = this.otherDangerData.filter(item => item.isSelected === true).length;
            if (count > 5) {
                this.otherDangerData[index].isSelected = false
                this.openVn()
            }

        },
        getImage(message) {
            this.midNetGIS.selectedImage = message
        },
        getDangerImage(message) {
            this.otherDangerData[message.index].selectedImage = message.data

        },
        distrbuteImage(newData) {
            for (let i = 0; i < newData.length; i++) {
                if (newData[i].fileTreePath.indexOf('基本信息/管网图(GIS)资料/中压管网分布图') != -1) {
                    this.midNetGIS.allImage = newData[i].fileList
                    this.midNetGIS.selectedImage=newData[i].fileList[0]
                }
            }
            for (let i = 0; i < this.otherDangerData.length; i++) {
                for (let n = 0; n < newData.length; n++) {
                    if (newData[n].fileTreePath.indexOf(this.otherDangerData[i].address) != -1) {
                        this.otherDangerData[i].allImage = newData[n].fileList
                        this.otherDangerData[i].selectedImage = newData[n].fileList[0]
                    }
                }
            }

        },

        handleChange(val) {
            console.log(val);
        }
    },
    components: {
        selectAlertImageVue,
        ImageDialog,

    }
}
</script>
<style></style>